<template>
  <div>
    <div>
      <router-link to="/Page1/login">登录</router-link>
      <router-link to="/Page1/register">注册</router-link>
    </div>
    <input v-model="inputValue" type="text" />
    <button @click="submitBtnClicked">提交</button>
    <ul>
      <todoItem
        v-for="(item,index) in list"
        :key="index"
        :index="index"
        :message="item"
        @delete="deleteItem"
      >{{item}}</todoItem>
    </ul>
    <div>
      <router-link to="/Page2">Page2</router-link>
    </div>
  </div>
</template>

<script>
import todoItem from "@/components/common/todoItem.vue";

export default {
  name: "Page1",
  data() {
    return {
      list: [],
      inputValue: ""
    };
  },
  components: {
    todoItem
  },
  methods: {
    submitBtnClicked: function() {
      console.log("提交");
      // console.log(this.inputValue);
      this.list.push(this.inputValue);
      // this.inputValue='';
    },
    deleteItem: function(index) {
      console.log(index);
      this.list.splice(index, 1);
    }
  }
};
</script>
